<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
import { ref } from 'vue'
defineProps({
  columns: { type: Array, default: [] },
  title: { type: String, default: '' },
  index: { type: Number, default: 0 }
})

const emit = defineEmits(['confirm'])
const show = ref(false)
const onConfirm = (value) => {
  show.value = false
  emit('confirm', value)
}

const showPicker = () => {
  show.value = true
}
defineExpose({
  showPicker
})
</script>

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <van-popup v-model:show="show" round position="bottom">
    <van-picker
      :columns="columns"
      :default-index="index"
      :title="title"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
